<template>
  <view class="category">
    <!-- 搜索 -->
<ygSearch></ygSearch>
    <!-- 内容 -->
    <view class="category_content">
      <!-- 左侧菜单 -->
      <view class="menu">
        <view
          @tap="onMenuTap(index)"
          :class="['menu_item',current===index?'active':'']"
          v-for="(item,index) in menus"
          :key="item"
        >{{item}}</view>
      </view>
      <!-- 右侧内容 -->
      <scroll-view
        class="category_list"
        scroll-y
        :scroll-top="scrollTop"
      >
        <view
          class="category_group"
          v-for="item in goods"
          :key="item.cat_id"
        >
          <!-- 标题 -->
          <view class="category_group_title">{{item.cat_name}}</view>
          <!-- 商品列表 -->
          <view class="category_group_list">
            <navigator
              :url="`/pages/goods_list/goods_list?id=${item2.cat_id}`"
              class="category_item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
            >
              <image
                mode="widthFix"
                :src="item2.cat_icon"
              ></image>
              <!-- 商品名称 -->
              <view class="goods_name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>

  </view>
</template>

<script>
/* 
1 发送请求的时候 把数据全部都获取回来
2 马上显示 第一条数据而已  大家电里面的数据
3 用户点击了其他菜单之后 才去显示 被点击的菜单对应的数据 

1 一开始 要让 第0个菜单选中 对应样式效果
2 给左侧的菜单绑定点击事件
  1 获取到被点击的元素所在 索引
  2 把索引 复制到 current 变量中

3 优化 
  存在问题
  1 在滑动了大家电商品到底部之后 点击 了其他的商品 海外购
  2 渲染新的数据 但是 商品页面不会滚动到顶部 
  3 感觉就像有人在用过了我们手机和小程序一样 体验不好 讨厌

  解决:
  1 小程序中 scroll-view 标签 和   scroll-top 属性 即可 
 */

// 定义全局变量  只是在js中使用 不会用到 标签渲染使用
/* 
1 如果只是想要使用全局变量 将它定义在 vue 外面即可   
2 如果既是全局变量 也是标签中渲染要使用 肯定就放在 data中!!!! 


/* 本地存储 缓存接口数据 */
/* 
1 先判断本地存储有没有数据
  1 有数据  过期时间 30s
    1 没有过期  使用 缓存数据
    2 已经过期了 重新发送请求 获取数据
  2 没有数据  重新发送请求 获取数据

2 构造 要存入到缓存中的数据的格式
  { time:存入的时候的时间戳,list:[接口的返回值] }

3 发送请求 获取到数据之后 将数据 存入到缓存中 

 */

let totalGoods = null;

export default {
  data() {
    return {
      // 左边菜单数组
      // left: ["大家电", "热门推荐"],
      // // 右侧显示的商品数组
      // rights: [
      //   { name: "电视", list: [{ name: "曲面电视" }, { name: "海信" }] },
      //   { name: "空调" },
      // ],

      // 左侧菜单
      menus: [],
      // 右侧 商品列表
      goods: [],

      // 选中的菜单的索引
      current: 0,
      // 完整的数据  不够 优秀!!!   目的 全局变量而已!!!
      //   data 中的数据  1 全局变量 2 标签中渲染要使用
      // totalGoods:[]

      // 右侧滚动条滚动的位置
      scrollTop: 0,
    };
  },
  async onLoad() {
    // 接口的数组
    let message = null;

    // 1 获取本地存储中的数据
    // cate = 对象 = ""
    const cate = uni.getStorageSync("categories");

    // 2 对本地存储 有没有数据的判断
    if (cate) {
      // 有数据了 判断有没有过期 10s
      if (Date.now() - cate.time > 1000 * 10) {
        // 过期了  重新发送请求
        message = (await this.$u.api.getCategories()).message;
        // 存入到缓存中
        uni.setStorageSync("categories", { time: Date.now(), list: message });
      } else {
        // 不过期 就可以使用缓存数据
        message = cate.list;
      }
    } else {
      // 没有数据 重新发送请求
      message = (await this.$u.api.getCategories()).message;
      // 存入到缓存中
      uni.setStorageSync("categories", { time: Date.now(), list: message });
    }

    this.menus = message.map((v) => v.cat_name);
    // 右侧商品数组赋值
    this.goods = message[0].children;

    // 把接口的返回值 存到 变量上
    totalGoods = message;
  },
  methods: {
    // 左侧菜单的点击事件
    onMenuTap(current) {
      this.current = current;

      // 让右侧商品根据 被点击的索引 改变显示的内容
      this.goods = totalGoods[current].children;
      // 设置右侧滚动条滚动的距离
      // scrollTop 一直都是0 小程序发现 这个值没有变过
      // 何必要重新设置 干脆 忽略!!!
      // 解决方案 就是 让 scrollTop 发生变化就可以了!!
      // 0 => 0.0001 =>0.000000034567654 =>0.334543345445
      this.scrollTop = Math.random() / 1000;
    },
  },
};
</script>

<style  lang="scss">
.category {
  display: flex;
  flex-direction: column;
  height: 100vh;
 

  .category_content {
    flex: 1;
    display: flex;
    overflow: hidden;
    .menu {
      width: 200rpx;
      overflow: auto;
      .menu_item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
      }
      .active {
        color: #eb4450;
        /* currentColor =  当前的字体颜色 css自带 */
        border-left: 5rpx solid currentColor;
      }
    }
    .category_list {
      flex: 1;
      overflow: auto;
      .category_group {
        .category_group_title {
          height: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          &::before {
            content: "/";
            margin-right: 10rpx;
          }
          &::after {
            content: "/";
            margin-left: 10rpx;
          }
        }

        .category_group_list {
          display: flex;
          flex-wrap: wrap;
          .category_item {
            width: 33.33%;
            text-align: center;
            image {
              // width: 70%;
              width: 128rpx;
              height: 128rpx;
              background-color: #eee;
            }

            .goods_name {
            }
          }
        }
      }
    }
  }
}
</style>